<template>
	<view class="tn-p">

		<view class="tn-mt flex-x flex-align-center">
			<text class="label tn-text-center">联 系 人</text>
			<view class="flex-1">
				<uv-input v-model="form.user_name" type="text" placeholder="收货人姓名" clearable />
			</view>
		</view>

		<view class="tn-mt flex-x flex-align-center">
			<text class="label tn-text-center">手 机 号</text>
			<view class="flex-1">
				<uv-input v-model="form.user_phone" :maxlength="11" type="number" placeholder="收货人手机号码" clearable />
			</view>
		</view>

		<view class="tn-mt flex-x flex-align-center">
			<text class="label tn-text-center">省 市 区</text>
			<view class="flex-1">
				<m-form-region v-model="pickerValue" />
			</view>
		</view>

		<view class="tn-mt flex-x flex-align-center">
			<text class="label tn-text-center">详情地址</text>
			<view class="flex-1">
				<uv-input v-model="form.region_addr" type="text" placeholder="楼号、门牌" clearable />
			</view>
		</view>

		<view class="tn-mt flex-x-between flex-align-center">
			<text class="label  tn-text-center">设为默认</text>
			<switch :checked="form.type" color="#fa436a" @change="switchChange" />
		</view>

		<view class="footbox">

			<!-- #ifdef MP-WEIXIN -->
			<uv-transition :show="true" mode="slide-bottom">
				<view class="tn-mt-xl flex-center">
					<uv-button shape="circle" type="success" @click="choose" customStyle="width:500rpx;height:90rpx">
						<uv-icon name="weixin-fill" color="#fff" labelColor="#fff" size="48rpx" label="从微信获取" />
					</uv-button>
				</view>
			</uv-transition>
			<!-- #endif -->

			<uv-transition :show="true" mode="slide-left">
				<view class="tn-mt-xl flex-center">
					<uv-button @click="confirm" shape="circle" type="primary" text="保 存"
						customStyle="width:500rpx;height:90rpx" />
				</view>
			</uv-transition>

			<uv-transition :show="true" mode="slide-right" v-if="form.id > 0">
				<view class="tn-mt-xl flex-center">
					<uv-button @click="remove" shape="circle" type="error" text="删 除"
						customStyle="width:500rpx;height:90rpx" />
				</view>
			</uv-transition>

		</view>

	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaToast, TaUseAccount, TaDataBase, TaDataAddress } from '@/utils'
import mFormRegion from '@/components/m-form-region/m-form-region.vue'

export default defineComponent({
	components: { mFormRegion },
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			back: <string>'',
			pickerData: [],
			pickerShow: false,
			pickerValue: <any>['广东省', '', ''],
			form: <any>{
				id: 0,
				type: true,
				user_name: '',
				user_phone: '',
				region_prov: '',
				region_city: '',
				region_area: '',
				region_addr: '',
			}
		}
	},
	onReady() {
		// 加载省市区数据
		TaDataBase.region().then((data: any) => {
			this.pickerData = data;
		})
	},
	onLoad(options: any) {
		this.back = options.back || ''
		this.form.id = Number(options.id || 0)
		uni.setNavigationBarTitle({ title: this.form.id ? '编辑收货地址' : '新增收货地址' })
		this.loadData()
	},
	onPullDownRefresh() {
		this.loadData()
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 默认地址切换
		switchChange(e: any) {
			this.form.type = e.detail.value || false
		},
		// 加载或刷新地址数据
		loadData() {
			if (this.form.id < 1) return;
			TaDataAddress.get(this.form.id).then((ret: any) => {
				if (ret.data.list.length < 1) {
					TaToast.error('无效地址').then(() => this.goto.addrForm(0))
				} else {
					this.form = ret.data.list[0] || {}
					this.form.type = !!this.form.type
					this.pickerValue = [
						this.form.region_prov || '',
						this.form.region_city || '',
						this.form.region_area || '',
					]
				}
			})
		},
		// 删除收货地址
		remove() {
			TaToast.confirm('确定要删除地址吗？').then(() => {
				TaDataAddress.del(this.form.id).then(() => this.goto.addrList(this.back, true))
			})
		},
		// 从微信读取收货地址
		choose() {
			uni.chooseAddress({
				fail: (res: any) => TaToast.error(res.errMsg || '获取地址失败！'),
				success: (res: any) => {
					console.log(res)
					if (/^1{10}$/.test(res.telNumber)) {
						this.form.user_phone = res.telNumber
					} else {
						TaToast.show('无效的手机号！')
					}
					this.form.user_name = res.userName
					this.form.region_prov = res.provinceName
					this.form.region_city = res.cityName
					this.form.region_area = res.countyName
					this.form.region_addr = res.detailInfo
					this.pickerValue = [
						this.form.region_prov || '',
						this.form.region_city || '',
						this.form.region_area || '',
					]
				}
			})
		},
		// 保存地址数据
		confirm() {

			if (!this.form.user_name) {
				return TaToast.error('姓名不能为空！')
			}

			if (!/(^1\d{10}$)/.test(this.form.user_phone)) {
				return TaToast.error('手机号码错误！')
			}

			if (
				this.pickerValue.length !== 3 ||
				!this.pickerValue[0] ||
				!this.pickerValue[1] ||
				!this.pickerValue[2]
			) {
				return TaToast.error('请选择省市区！')
			} else {
				this.form.region_prov = this.pickerValue[0]
				this.form.region_city = this.pickerValue[1]
				this.form.region_area = this.pickerValue[2]
			}

			if (!this.form.region_addr) {
				return TaToast.error('请填详情地址！')
			}

			let form: any = JSON.parse(JSON.stringify(this.form))
			form.type = form.type ? 1 : 0

			TaDataAddress.set(form).then((ret: any) => {
				TaToast.success(`${this.form.id ? '修改' : '添加'}成功`).then(() => {
					if (this.back) {
						this.goto.addrConfirm(this.back, ret.data.id)
					} else {
						this.goto.addrList(this.back, true)
					}
				})
			})
		},
	}
})
</script>

<style lang="scss">
.label {
	width: 6em;
	color: #6f6f6f;
	font-size: 25rpx;
}

page,
uni-page-body {
	background-color: white;
}
</style>